<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exercise 2: Grids</title>
<link rel="stylesheet" type="text/css" media="all"  href="../css/libraries.css" />
<link rel="stylesheet" type="text/css" media="all"  href="../css/template.css" />
<!--<link rel="stylesheet" type="text/css" media="all"  href="../css/template_debug.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="../css/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod_skin.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="ugly.css" />
</head>
<body>
<div class="page">
	<div class="head">
		<img src="http://oocss.org/img/header.jpg" />
	</div>
	<div class="body">
		<div class="leftCol myYahoo">
			<h2>Left Column</h2>
			<p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
			<ul>
				<li>.gMail = 160px</li>
				<li>.gCal = 180px</li>
				<li>.yahoo = 240px</li>
				<li>.myYahoo = 300px</li>
			</ul>
		</div>
	    <div class="main">
			<h2>Main Content</h2>
			<p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of "leftCol" and "rightCol" are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
			<div class="line">
			  <div class="unit size1of4">
		        <h3>1/4</h3>
		        <p>Lorem ipsum dolor sit amet...</p>
	    	  </div>
			  <div class="unit size1of4">
			    <h3>1/4</h3>
			    <p>Lorem ipsum dolor sit amet...</p>
			</div>
		    <div class="unit size1of4">
		        <h3>1/4</h3>
		        <p>Lorem ipsum dolor sit amet...</p>
		    </div>
		    <div class="unit size1of4 lastUnit">
		        <h3>1/4</h3>
		        <p>Lorem ipsum dolor sit amet...</p>
		    </div>
			</div>
		</div>
	</div>
	<div class="foot">
		<p>Fast & Furious by Lazyousuf. http://www.flickr.com/photos/lazyousuf/3112028635/ </p>
	</div>	
</div>
</body>
</html>
